Modal presentaions#

The Scripting app supports SwiftUI-style modal view presentations through declarative properties applied to UI components. These include support for sheet, popover, fullScreenCover, alert, and confirmationDialog. Each of these is defined using structured configuration objects that allow you to present views based on application state.

Alert#

Displays an alert with a title, optional message, and one or more actions when the specified condition is true.

1alert?: {
2  title: string
3  isPresented: boolean
4  onChanged: (isPresented: boolean) => void
5  actions: VirtualNode
6  message?: VirtualNode
7}

Properties#

• title: A string used as the title of the alert.
• isPresented: A boolean value that controls the visibility of the alert.
• onChanged: A callback function invoked when the isPresented value changes. You must update this value to false when dismissing the alert.
• actions: A VirtualNode representing the alert’s actions.
• message (optional): A VirtualNode that describes the alert’s message content.

Confirmation Dialog#

Displays a confirmation dialog with a title, optional message, and a set of actions. The dialog is shown when the isPresented condition is true.

1confirmationDialog?: {
2  title: string
3  titleVisibility?: Visibility
4  isPresented: boolean
5  onChanged: (isPresented: boolean) => void
6  actions: VirtualNode
7  message?: VirtualNode
8}

Properties#

• title: The title text for the dialog.
• titleVisibility (optional): Determines the visibility of the title. Defaults to "automatic".
• isPresented: Controls whether the dialog is currently visible.
• onChanged: A callback that updates the isPresented state when the dialog is dismissed.
• actions: A VirtualNode representing the dialog’s action buttons.
• message (optional): A VirtualNode providing a descriptive message.

1type Visibility = "automatic" | "hidden" | "visible"

Sheet#

Presents a modal sheet from the bottom of the screen when the isPresented condition is true. Multiple sheets can be registered using an array of presentation objects.

1sheet?: ModalPresentation | ModalPresentation[]

Full Screen Cover#

Presents a modal view that covers the entire screen. Multiple views can be registered using an array of presentation objects.

1fullScreenCover?: ModalPresentation | ModalPresentation[]

Popover#

Presents a popover when the isPresented condition is true. Popovers can be configured with arrow direction and adaptation strategies.

1popover?: PopoverPresentation | PopoverPresentation[]

PopoverPresentation#

1type PopoverPresentation = ModalPresentation & {
2  arrowEdge?: Edge
3  presentationCompactAdaptation?: PresentationAdaptation | {
4    horizontal: PresentationAdaptation
5    vertical: PresentationAdaptation
6  }
7}

Properties#

• arrowEdge (optional): Defines the edge of the anchor that the popover arrow points to. Defaults to "top".
• presentationCompactAdaptation (optional): Specifies how the presentation adapts in compact size classes.

1type Edge = "top" | "bottom" | "leading" | "trailing"

ModalPresentation#

Defines a common interface used by sheet, popover, and fullScreenCover.

1type ModalPresentation = {
2  isPresented: boolean
3  onChanged: (isPresented: boolean) => void
4  content: VirtualNode
5}

Properties#

• isPresented: A boolean value indicating whether the modal is shown.
• onChanged: A callback that updates the isPresented state when the modal is dismissed.
• content: A VirtualNode representing the modal view content.

PresentationAdaptation#

Specifies the strategy used when adapting modal presentations to different size classes.

1type PresentationAdaptation =
2  | "automatic"
3  | "fullScreenCover"
4  | "none"
5  | "popover"
6  | "sheet"

• automatic: Uses the system default adaptation.
• fullScreenCover: Prefers a full-screen cover style.
• popover: Prefers a popover style.
• sheet: Prefers a sheet style.
• none: Disables adaptation if possible.

Example Usage#

Presenting a Sheet#

1<Button
2  title={"Present"}
3  action={() => setIsPresented(true)}
4  sheet={{
5    isPresented: isPresented,
6    onChanged: setIsPresented,
7    content: <VStack>
8      <Text>Sheet content</Text>
9      <Button title={"Dismiss"} action={() => setIsPresented(false)} />
10    </VStack>
11  }}
12/>

Presenting a Popover#

1<Button
2  title={"Show Popover"}
3  action={() => setIsPresented(true)}
4  popover={{
5    isPresented: isPresented,
6    onChanged: setIsPresented,
7    presentationCompactAdaptation: "popover",
8    content: <Text>Popover content</Text>,
9    arrowEdge: "top",
10  }}
11/>

Presenting a Full Screen Cover#

1<Button
2  title={"Present"}
3  action={() => setIsPresented(true)}
4  fullScreenCover={{
5    isPresented: isPresented,
6    onChanged: setIsPresented,
7    content: <VStack>
8      <Text>A full-screen modal view.</Text>
9    </VStack>
10  }}
11/>

Configuring Sheet Height#

1sheet={{
2  isPresented: isPresented,
3  onChanged: setIsPresented,
4  content: <VStack
5    presentationDetents={[200, "medium", "large"]}
6    presentationDragIndicator={"visible"}
7  >
8    <Text>Resizable sheet</Text>
9  </VStack>
10}}

Presenting an Alert#

1<Button
2  title={"Present"}
3  action={() => setIsPresented(true)}
4  alert={{
5    isPresented: isPresented,
6    onChanged: setIsPresented,
7    title: "Alert",
8    message: <Text>Everything is OK</Text>,
9    actions: <Button title={"OK"} action={() => {}} />
10  }}
11/>

Presenting a Confirmation Dialog#

1<Button
2  title={"Present"}
3  action={() => setIsPresented(true)}
4  confirmationDialog={{
5    isPresented,
6    onChanged: setIsPresented,
7    title: "Do you want to delete this image?",
8    actions: <Button title={"Delete"} role={"destructive"} action={() => {}} />
9  }}
10/>